<template>
  <div class="safe-wrap">
    <div class="safe-content">
      <!-- 手机号 -->
      <div class="safe-item">
        <div class="safe-item-img">
          <img src="@/assets/accountSettings/icon1.png" alt />
        </div>
        <h3>手机号</h3>
        <p>{{showPhone}}</p>
        <el-button @click="openDialog(1)">修改手机号</el-button>
        <div class="has-box">
          <img v-if="userInfo.is_phone" class="hasImg" src="@/assets/accountSettings/icon6.png" alt />
          <img v-else class="hasImg" src="@/assets/accountSettings/icon7.png" alt />
        </div>
      </div>

      <!-- 银行卡 -->
      <div class="safe-item">
        <div class="safe-item-img">
          <img src="@/assets/accountSettings/icon11.png" alt />
        </div>
        <h3>
          银行卡
          <span
            class="parentBankName"
            v-show="binkCardInfo.parentBankName"
          >{{binkCardInfo.parentBankName}}</span>
        </h3>
        <p v-if="binkCardInfo.cardType">{{showCard}}</p>
        <p v-else>未绑定</p>
        <el-button v-if="binkCardInfo.cardType" @click="openDialog(6)">解绑</el-button>
        <el-button v-else @click="openDialog(7)">立即绑定</el-button>
        <div class="has-box">
          <img
            v-if="binkCardInfo.cardType"
            class="hasImg"
            src="@/assets/accountSettings/icon6.png"
            alt
          />
          <img v-else class="hasImg" src="@/assets/accountSettings/icon7.png" alt />
        </div>
      </div>

      <!-- 微信 -->
      <!-- <div class="safe-item">
        <div class="safe-item-img">
          <img src="@/assets/accountSettings/icon3.png" alt />
        </div>
        <h3>微信</h3>
        <p>绑定后可以用微信账户登录云木屋</p>
        <el-button v-if="userInfo.is_wechat" @click="_bindWeiXin(1)">解除绑定</el-button>
        <el-button v-else @click="_bindWeiXin(0)">立即绑定</el-button>
        <div class="has-box">
          <img
            v-if="userInfo.is_wechat"
            class="hasImg"
            src="@/assets/accountSettings/icon6.png"
            alt
          />
          <img v-else class="hasImg" src="@/assets/accountSettings/icon7.png" alt />
        </div>
      </div>-->

      <!-- 邮箱 -->
      <div class="safe-item">
        <div class="safe-item-img">
          <img src="@/assets/accountSettings/icon4.png" alt />
        </div>
        <h3>邮箱</h3>
        <p>邮箱用于接收账号消息通知</p>
        <el-button v-if="userInfo.is_email" @click="_bindEmail">解除绑定</el-button>
        <el-button v-else @click="openDialog(4)">立即绑定</el-button>
        <div class="has-box">
          <img v-if="userInfo.is_email" class="hasImg" src="@/assets/accountSettings/icon6.png" alt />
          <img v-else class="hasImg" src="@/assets/accountSettings/icon7.png" alt />
        </div>
      </div>

      <!-- 登录密码 -->
      <div class="safe-item">
        <div class="safe-item-img">
          <img src="@/assets/accountSettings/icon2.png" alt />
        </div>
        <h3>登录密码</h3>
        <p>定期更换密码有助于账号安全</p>
        <el-button @click="openDialog(2)">修改登录密码</el-button>
        <div class="has-box">
          <img v-if="userInfo.is_login" class="hasImg" src="@/assets/accountSettings/icon6.png" alt />
          <img v-else class="hasImg" src="@/assets/accountSettings/icon7.png" alt />
        </div>
      </div>

      <!-- 交易密码 -->
      <div class="safe-item">
        <div class="safe-item-img">
          <img src="@/assets/accountSettings/icon5.png" alt />
        </div>
        <h3>交易密码</h3>
        <p>定期更换密码有助于账号安全</p>
        <el-button @click="_editTraderPassword">修改交易密码</el-button>
        <div class="has-box">
          <img
            v-if="userInfo.is_password"
            class="hasImg"
            src="@/assets/accountSettings/icon6.png"
            alt
          />
          <img v-else class="hasImg" src="@/assets/accountSettings/icon7.png" alt />
        </div>
      </div>
    </div>

    <el-dialog
      :visible.sync="dialogFlag"
      :close-on-click-modal="false"
      :lock-scroll="false"
      :before-close="closeDialog"
      width="695px"
    >
      <span slot="title" class="dialog-title">
        <i></i>
        <span>{{dailogTitle}}</span>
      </span>
      <phone ref="children" v-if="dialogType==1" />
      <dlPassword ref="children" v-else-if="dialogType==2" />
      <weChat v-else-if="dialogType==3" />
      <eMail ref="children" v-else-if="dialogType==4" />
      <bindCard
        ref="children"
        :binkCardInfo="binkCardInfo"
        @bindCardHandle="bindCardHandle"
        v-else-if="dialogType==7"
      />
      <unbindCard
        ref="children"
        :binkCardInfo="binkCardInfo"
        @bindCardHandle="bindCardHandle"
        v-else-if="dialogType==6"
      />
      <jyPassword v-else-if="dialogType==5" />
    </el-dialog>
  </div>
</template>

<script>
import phone from "./dialog/phone";
import dlPassword from "./dialog/dlPassword";
import weChat from "./dialog/weChat";
import eMail from "./dialog/e-mail";
import jyPassword from "./dialog/jyPassword";
import bindCard from "./dialog/bindCard";
import unbindCard from "./dialog/unbindCard";
import {
  getUserInfo,
  editTraderPassword,
  bindWeiXin,
  bindEmail,
} from "@/api/accountSettings";
import {
  checkBankCard,
  getLimitList,
  applybindBankcard,
  bindBankcard,
  applyUnbindBankcard,
  unBindBankcard,
  withdrawBuy,
  rechargeBuy,
  rechargeGetquick,
  rechargeQuickbuy,
  getCompanyCard,
  withdrawBuyCompany,
  resendWithdrawCode,
  confirmWithdrawBuyCompany,
  checkSign,
} from "@/api/rechargeWithDrawal";
export default {
  name: "safe",
  components: {
    phone,
    dlPassword,
    weChat,
    eMail,
    jyPassword,
    bindCard,
    unbindCard,
  },
  data() {
    return {
      dialogFlag: false,
      dialogType: "",
      dailogTitle: "",
      userInfo: {},
      showPhone: "",
      emailParams: {
        type: "",
        email: "",
        key: "",
      },
      binkCardInfo: {
        cardType: "",
        parentBankName: "",
        ystMobile: "",
      },
      showCard: "",
    };
  },
  created() {
    this._getUserInfo();
    this._checkBankCard();
  },
  methods: {
    bindCardHandle() {
      this.dialogFlag = false;
      this._checkBankCard();
    },
    // 检测和得到绑定银行卡信息（个人OR法人）
    _checkBankCard() {
      checkBankCard().then((res) => {
        // console.log("检测绑定银行卡信息", res);
        if (res.data) {
          // let reg = /^(\d{4})\d+(\d{4})$/;
          // this.binkCardInfo.cardType = "12345678912345678945";
          // this.binkCardInfo.ystMobile = "15515357205";
          // this.binkCardInfo.parentBankName = "招商银行";
          // this.showCard = this.binkCardInfo.cardType.replace(
          //   reg,
          //   "$1**********$2"
          // );
          if (res.data.cardType) {
            this.binkCardInfo.cardType = res.data.cardType;
            this.binkCardInfo.parentBankName = res.data.parentBankName;
            this.binkCardInfo.ystMobile = res.data.ystMobile;
            let reg = /^(\d{4})\d+(\d{4})$/;
            this.showCard = this.binkCardInfo.cardType.replace(
              reg,
              "$1**********$2"
            );
          }
        }
        console.log("银行卡信息", this.binkCardInfo);
      });
    },
    // 绑定/解绑微信
    _bindWeiXin(val) {
      let params = {
        type: val,
      };
      bindWeiXin(params).then((res) => {
        if (res.code == 1) {
          if (!val) {
            window.open(res.data.url);
          } else {
            this.$message.success("微信解绑成功");
            setTimeout(() => {
              this._getUserInfo();
            }, 1500);
          }
        }
      });
    },
    // 绑定/解绑邮箱
    _bindEmail() {
      this.emailParams.type = 2;
      bindEmail(this.emailParams).then((res) => {
        if (res.code == 1) {
          window.location.reload();
        }
      });
    },
    // 修改交易密码
    _editTraderPassword() {
      editTraderPassword().then((res) => {
        if (res.code == 1) {
          window.open(res.data.url);
        }
      });
    },
    // 获取用户信息
    _getUserInfo() {
      getUserInfo().then((res) => {
        this.userInfo = res.data;
        console.log("账户信息", this.userInfo);
        let reg = /^(\d{3})\d+(\d{4})$/;
        this.showPhone = this.userInfo.loginphone.replace(reg, "$1****$2");
      });
    },
    openDialog(flag) {
      this.dialogFlag = true;
      this.dialogType = flag;
      if (flag == 1) {
        this.dailogTitle = "修改手机号";
      } else if (flag == 2) {
        this.dailogTitle = "修改登录密码";
      } else if (flag == 3) {
        this.dailogTitle = "绑定微信";
      } else if (flag == 4) {
        this.dailogTitle = "绑定邮箱";
      } else if (flag == 5) {
        this.dailogTitle = "修改交易密码";
      } else if (flag == 6) {
        this.dailogTitle = "解绑银行卡";
      } else if (flag == 7) {
        this.dailogTitle = "绑定银行卡";
      }
    },
    openWeChat() {},
    closeDialog() {
      this.dialogFlag = false;
      this.$refs.children.resetPages();
    },
  },
};
</script>
<style lang="scss">
.safe-wrap {
  .el-dialog {
    margin-top: 8vh !important;
    min-height: 500px;
    .el-dialog__header {
      border-bottom: 1px solid #ebf0f2;
      padding: 15px;
      .dialog-title {
        i {
          padding: 3px 2px;
          background: #fe6616;
          margin-right: 15px;
          border-radius: 10px;
        }
        span {
          font-size: 18px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: rgba(51, 51, 51, 1);
        }
      }
    }
    .el-dialog__body {
      padding: 0;
    }
  }
}
</style>

<style lang='scss' scoped>
.safe-wrap {
  width: 100%;
  margin: 80px 0 20px 0;
  .safe-content {
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .safe-item {
      width: 22%;
      height: 310px;
      margin-bottom: 60px;
      box-shadow: 1px 1px 25px #eee;
      text-align: center;
      padding: 50px 0;
      position: relative;
      .has-box {
        position: absolute;
        top: 0;
        right: 0;
      }
      .safe-item-img {
        height: 60px;
      }
      h3 {
        font-size: 20px;
        font-weight: 400;
        color: #333;
        padding-top: 10px;
        position: relative;
        .parentBankName {
          font-size: 12px;
          color: #fff;
          padding: 3px 4px 1px 4px;
          background: #d4d4d4;
          position: absolute;
          right: 16%;
          top: 13px;
        }
      }
      p {
        color: #a1a1a1;
        font-size: 14px;
        padding-bottom: 10px;
      }
      .el-button {
        width: 68%;
      }
      // &:last-of-type{
      //   margin-right: auto;
      //   margin-left: 4%;
      // }
    }
  }
}
</style>